// 设计稿宽度1920px的值
@baseFont: 80;

/* 实现rem适配 */
@media screen and (max-width: 1024px) {
  html {
    font-size: 42.66px !important;
  }
}
@media screen and (min-width: 1920px) {
  html {
    font-size: 80px !important;
  }
}

body {
  background: url(../images/bg.jpg) no-repeat;
  background-size: cover;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.5rem;
  line-height: 1.15;
}
// 公共面板样式
.panel {
  position: relative;
  border: solid transparent;
  border-width: (51rem / @baseFont) (38rem / @baseFont) (20rem / @baseFont)
    (132rem / @baseFont);
  // border-image-source: url(../images/border.png);
  // border-image-slice: 51 38 20 132;
  border-image: url(../images/border.png) 51 38 20 132;
  margin-bottom: 20rem / @baseFont;
  .inner {
    position: absolute;
    top: -51rem / @baseFont;
    right: -38rem / @baseFont;
    bottom: -20rem / @baseFont;
    left: -132rem / @baseFont;
    padding: (24rem / @baseFont) (36rem / @baseFont);
    h3 {
      font-size: 20rem / @baseFont;
      color: #fff;
      font-weight: 400;
    }
  }
}

.viewport {
  display: flex;
  min-width: 1024px;
  max-width: 1920px;
  min-height: 780px;
  max-height: 1078px;
  background: url(../images/logo.png) no-repeat;
  background-size: contain;
  margin: 0 auto;
  padding: (88rem / @baseFont) (20rem / @baseFont) 0;
  .column {
    flex: 3;
    position: relative;
    &:nth-child(2) {
      flex: 4;
      margin: (32rem / @baseFont) (20rem / @baseFont) 0;
    }
    //概览区域模块制作
    .overview {
      height: 110rem / @baseFont;
      ul {
        display: flex;
        justify-content: space-between;
        li {
          h4 {
            margin: 0 0 (8rem / @baseFont) (4.8rem / @baseFont);
            font-size: 28rem / @baseFont;
            color: #fff;
          }
          span {
            font-size: 16rem / @baseFont;
            color: #4c9bfd;
          }
        }
      }
    }
    //监控区域模块制作
    .monitor {
      height: 480rem / @baseFont;
      .inner {
        display: flex;
        flex-direction: column;
        padding: (24rem / @baseFont) 0;
        .tabs {
          display: flex;
          padding: 0 (36rem / @baseFont);
          margin-bottom: 18rem / @baseFont;
          a {
            padding: 0 (27rem / @baseFont);
            color: #1950c4;
            font-size: 18rem / @baseFont;
            &:first-child {
              padding-left: 0;
              border-right: (2rem / @baseFont) solid #00f2f1;
            }
            &.active {
              color: #fff;
            }
          }
        }
        .content {
          flex: 1;
          position: relative;
          display: none;
          .col {
            &:first-child {
              width: 80rem / @baseFont;
            }
            &:nth-child(2) {
              width: 200rem / @baseFont;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }
            &:nth-child(3) {
              width: 80rem / @baseFont;
            }
          }
          .head {
            display: flex;
            justify-content: space-between;
            background-color: rgba(255, 255, 255, 0.1);
            padding: (12rem / @baseFont) (36rem / @baseFont);
            line-height: 1.05;
            color: #68d8fe;
            font-size: 14rem / @baseFont;
          }
          .marquee-view {
            overflow: hidden;
            position: absolute;
            top: 40rem / @baseFont;
            bottom: 0;
            width: 100%;
            .marquee {
              /* 通过css3动画滚动marquee */
              @keyframes move {
                0% {
                }
                100% {
                  transform: translateY(-50%);
                }
              }
              animation: move 15s linear infinite;
              /* 鼠标经过marquee，就停止动画 */
              &:hover {
                animation-play-state: paused;
              }
              .row {
                display: flex;
                justify-content: space-between;
                padding: (12rem / @baseFont) (36rem / @baseFont);
                line-height: 1.05;
                font-size: 12rem / @baseFont;
                color: #61a8ff;
                .icon-dot {
                  position: absolute;
                  left: 16rem / @baseFont;
                  opacity: 0;
                }
                &:hover {
                  background-color: rgba(255, 255, 255, 0.1);
                  color: #68d8fe;
                }
                &:hover .icon-dot {
                  opacity: 1;
                }
              }
            }
          }
        }
      }
    }
    //点位分布统计模块制作
    .point {
      height: 340rem / @baseFont;
      .chart {
        display: flex;
        justify-content: space-between;
        margin-top: 24rem / @baseFont;
        .pie {
          width: 312rem / @baseFont;
          height: 240rem / @baseFont;
          margin-left: -10rem / @baseFont;
        }
        .data {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: 168rem / @baseFont;
          padding: (36rem / @baseFont) (30rem / @baseFont);
          background-image: url(../images/rect.png);
          background-size: cover;
          .item {
            h4 {
              margin-bottom: 12rem / @baseFont;
              font-size: 28rem / @baseFont;
              color: #fff;
            }
            span {
              display: block;
              font-size: 16rem / @baseFont;
              color: #4c9bfd;
            }
          }
        }
      }
    }
    //地图区域模块制作
    .map {
      display: flex;
      flex-direction: column;
      height: 578rem / @baseFont;
      margin-bottom: 20rem / @baseFont;
      h3 {
        padding: (16rem / @baseFont) 0;
        margin: 0;
        font-size: 20rem / @baseFont;
        color: #fff;
        font-weight: 400;
        line-height: 1;
        .icon-cube {
          color: #68d8fe;
        }
      }
      .chart {
        flex: 1;
        background-color: rgba(255, 255, 255, 0.05);
        .geo {
          width: 100%;
          height: 100%;
        }
      }
    }
    //用户统计模块制作
    .users {
      display: flex;
      height: 340rem / @baseFont;
      .chart {
        display: flex;
        margin-top: 24rem / @baseFont;
        .bar {
          width: 588rem / @baseFont;
          height: 240rem / @baseFont;
        }
        .data {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: 168rem / @baseFont;
          padding: (36rem / @baseFont) (30rem / @baseFont);
          background-image: url(../images/rect.png);
          background-size: cover;
          .item h4 {
            margin-bottom: 12rem / @baseFont;
            font-size: 28rem / @baseFont;
            color: #fff;
          }
          .item span {
            display: block;
            color: #4c9bfd;
            font-size: 16rem / @baseFont;
          }
        }
      }
    }
    //订单区域模块制作
    .order {
      height: 150rem / @baseFont;
      .filter {
        display: flex;
        a {
          display: block;
          height: 18rem / @baseFont;
          padding: 0 (18rem / @baseFont);
          border-right: (2rem / @baseFont) solid #00f2f1;
          line-height: 1;
          color: #1950c4;
          font-size: 18rem / @baseFont;
          &:first-child {
            padding-left: 0;
          }
          &:last-child {
            border-right: none;
          }
          &.active {
            color: #fff;
            font-size: 20rem / @baseFont;
          }
        }
      }
      .data {
        display: flex;
        margin-top: 20rem / @baseFont;
        .item {
          width: 50%;
          h4 {
            margin-bottom: 10rem / @baseFont;
            color: #fff;
            font-size: 28rem / @baseFont;
          }
          span {
            display: block;
            color: #4c9bfd;
            font-size: 16rem / @baseFont;
          }
        }
      }
    }
    //销售额区域模块制作
    .sales {
      height: 248rem / @baseFont;
      .inner {
        display: flex;
        flex-direction: column;
        .caption {
          display: flex;
          line-height: 1;
          h3 {
            height: 18rem / @baseFont;
            padding-right: 18rem / @baseFont;
            border-right: 2rem / @baseFont solid #00f2f1;
          }
          a {
            padding: 4rem / @baseFont;
            margin: (-3rem / @baseFont) 0 0 (21rem / @baseFont);
            border-radius: 3rem / @baseFont;
            font-size: 16rem / @baseFont;
            color: #0bace6;
            &.active {
              background-color: #4c9bfd;
              color: #fff;
            }
          }
        }
        .chart {
          flex: 1;
          position: relative;
          padding-top: 15rem / @baseFont;
          .label {
            position: absolute;
            left: 42rem / @baseFont;
            top: 18rem / @baseFont;
            color: #4996f5;
            font-size: 14rem / @baseFont;
          }
          .line {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    //渠道区域模块制作  和  销售进度模块制作
    .wrap {
      display: flex;
      .channel,
      .quarter {
        flex: 1;
        height: 232rem / @baseFont;
      }
      //渠道区域模块制作
      .channel {
        margin-right: 20rem / @baseFont;
        .data {
          overflow: hidden;
          .radar {
            height: 168rem / @baseFont;
            width: 100%;
          }
        }
      }
      // 销售进度模块制作
      .quarter .inner {
        display: flex;
        flex-direction: column;
        margin: 0 (-6rem / @baseFont);
        .chart {
          flex: 1;
          padding-top: 18rem / @baseFont;
          .box {
            position: relative;
            .label {
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -30%);
              color: #fff;
              font-size: 30rem / @baseFont;
              small {
                font-size: 50%;
              }
            }
            .gauge {
              height: 84rem / @baseFont;
            }
          }
          .data {
            display: flex;
            justify-content: space-between;
            .item {
              width: 50%;
              h4 {
                margin-bottom: 10rem / @baseFont;
                color: #fff;
                font-size: 24rem / @baseFont;
              }
              span {
                display: block;
                width: 100%;
                color: #4c9bfd;
                font-size: 14rem / @baseFont;
                /* 单行文本溢出省略 */
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }
            }
          }
        }
      }
    }
    //全国热榜模块制作
    .top {
      height: 280rem / @baseFont;
      .inner {
        display: flex;
        .all {
          display: flex;
          flex-direction: column;
          width: 168rem / @baseFont;
          color: #4c9bfd;
          font-size: 14rem / @baseFont;
          vertical-align: middle;
          ul {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            padding-left: 12rem / @baseFont;
            margin-top: 12rem / @baseFont;
            li {
              overflow: hidden;
              [class^="icon-"] {
                margin-right: 12rem / @baseFont;
                font-size: 36rem / @baseFont;
                vertical-align: middle;
              }
            }
          }
        }
        .province {
          flex: 1;
          display: flex;
          flex-direction: column;
          color: #fff;
          i {
            float: right;
            padding: 0 (12rem / @baseFont);
            margin-top: 5rem / @baseFont;
            font-size: 14rem / @baseFont;
            font-style: normal;
            color: #0bace6;
          }
          s {
            display: inline-block;
            transform: scale((0.8));
            text-decoration: none;
          }
          .icon-up {
            color: #dc3c33;
          }
          .icon-down {
            color: #36be90;
          }
          .data {
            flex: 1;
            display: flex;
            margin-top: 14rem / @baseFont;
            ul {
              flex: 1;
              margin-bottom: 14rem / @baseFont;
              line-height: 1;
              li {
                display: flex;
                justify-content: space-between;
                span {
                  display: block;
                  //单行文本溢出省略
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }
              }
            }
            ul.sup {
              font-size: 14rem / @baseFont;
              li {
                color: #4995f4;
                padding: 12rem / @baseFont;
                cursor: pointer;
                &.active {
                  color: #a3c6f2;
                  background-color: rgba(10, 67, 188, 0.2);
                }
              }
            }
            ul.sub {
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              font-size: 12rem / @baseFont;
              background-color: rgba(10, 67, 188, 0.2);
              li {
                color: #52ffff;
                padding: (10rem / @baseFont) (14rem / @baseFont);
              }
            }
          }
        }
      }
    }
  }
}
